<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<style>
    body {
        font-family: Arial, sans-serif;
        align-content: center;
    }

    .container {
        margin: auto;
        margin-top: 60px;
        width: 300px;
        padding: 10px;
        border: 1px solid #abc;
        background-color: #c9f;
        box-shadow: 0 0 10px #ccc;
    }

    .output {
        font-size: 2em;
        text-align: right;
        padding: 12px;
        background-color: #eef;
        border: 1px solid #cce;
        overflow: hidden;
    }

    .button {
        font-size: 1.5em;
        margin: 5px;
        width: 60px;
        height: 50px;
        border: none;
        background-color: #ccc;
        color: #fff;
        cursor: pointer;
    }

    .buttonOfOperation {
        font-size: 1.5em;
        margin: 5px;
        width: 60px;
        height: 50px;
        border: 1px solid #afc;
        background-color: #aef;
        color: #fff;
        cursor: pointer;
    }

    .buttonOfAD {
        font-size: 1.5em;
        margin: 5px;
        width: 60px;
        height: 50px;
        border: none;
        background-color: #e86;
        color: #fff;
        cursor: pointer;
    }

    .button:hover {
        background-color: #98A;
    }

    .buttonOfOperation:hover {
        background-color: #98c;
    }

    .clear {
        background-color: #ff6666;
    }

    .equals {
        background-color: #66eeAA;
    }
</style>

<body>
<div class="container">
    <div class="output" id="output">0</div>
    <button class="buttonOfAD" onclick="clearOutput()" id="clear">清空</button>
    <button class="buttonOfAD" data-accessKey="BackSpace" onclick="BackSpace()">删除</button>
    <button class="buttonOfOperation" data-accessKey="%" onclick="appendToOutput('%')">%</button>
    <button class="buttonOfOperation" onclick="appendToOutput('√')">√</button>
    <button class="button" data-accessKey="7" onclick="appendToOutput('7')">7</button>
    <button class="button" data-accessKey="8" onclick="appendToOutput('8')">8</button>
    <button class="button" data-accessKey="9" onclick="appendToOutput('9')">9</button>
    <button class="buttonOfOperation" data-accessKey="/" onclick="appendToOutput('/')">/</button>
    <button class="button" data-accessKey="4" onclick="appendToOutput('4')">4</button>
    <button class="button" data-accessKey="5" onclick="appendToOutput('5')">5</button>
    <button class="button" data-accessKey="6" onclick="appendToOutput('6')">6</button>
    <button class="buttonOfOperation" data-accessKey="*" onclick="appendToOutput('*')">*</button>
    <button class="button" data-accessKey="1" onclick="appendToOutput('1')">1</button>
    <button class="button" data-accessKey="2" onclick="appendToOutput('2')">2</button>
    <button class="button" data-accessKey="3" onclick="appendToOutput('3')">3</button>
    <button class="buttonOfOperation" onclick="appendToOutput('-')">-</button>
    <button class="button" data-accessKey="." onclick="appendToOutput('.')">.</button>
    <button class="button" data-accessKey="0" onclick="appendToOutput('0')">0</button>
    <button class="button equals" onclick="calculate()">=</button>
    <button class="buttonOfOperation" onclick="appendToOutput('+')">+</button>
</div>
<script>
    let output = document.getElementById("output");

    function appendToOutput(value) {
        if (output.innerHTML === "0") {
            output.innerHTML = value;
        }
        /*else if(output.innerHTML === "√"){
            output.innerHTML = ;
        }*/
        else {
            output.innerHTML += value;
        }
    }

    function clearOutput() {
        output.innerHTML = "0";
    }

    function BackSpace() {
        if (output.innerHTML.length > 1) {
            output.innerHTML = output.innerHTML.substr(0, output.innerHTML.length - 1);
        } else {
            output.innerHTML = "0";
        }
    }

    function calculate() {
        if (output.innerHTML.includes("√")) {
            var num = output.innerHTML.substring(1, output.innerHTML.length);
            output.innerHTML = eval(Math.sqrt(num));
        } else {
            output.innerHTML = eval(output.innerHTML);
        }
    }

    let _accessKey = new Map();
    window.addEventListener("load", (event) => {
        document.querySelectorAll("[data-accesskey]").forEach(function (e) {
            let accessKey = e.getAttribute("data-accessKey");
            if (!_accessKey.has(accessKey)) {
                document.addEventListener("keydown", (event) => {
                    if (event.key === accessKey) {
                        e.click();
                    }
                })
                _accessKey.set(accessKey, e);
            } else {
                console.warn(`data-accessKey重复:${accessKey},`, "当前未设置节点:", e, `已设置节点:`, _accessKey.get(accessKey))
            }
        })
    });
</script>
</body>
</html>